/*
 * @Author: jiu yin
 * @Date: 2024-05-09 15:52:47
 * @LastEditTime: 2024-06-26 16:07:40
 * @LastEditors: jiu yin zhen jing
 * @FilePath: \studio-web-admin\src\view\pico\detail.tsx
 * jiu
 */
import { device_detail } from "@/api/home";
import { useRoute } from "@/hooks";
import { Button, Radio } from "antd";
import { useEffect, useState } from "react";
import PicoBaseInfo from "./component/PicoBaseInfo";
import PicoInfo from "./component/PicoInfo";
import MapTable from "./component/MapTable";
import SceneTable from "./component/SceneTable";
import "./index.scss";

export default function detail() {
	const { getParams, push } = useRoute();
	const { device_real_sn } = getParams();

	let [isRequest, setIsRequest] = useState(false);

	let [detail, set_detail] = useState<any>({});
	useEffect(() => {
		device_detail({ device_sn: device_real_sn }).then((res: any) => {
			set_detail(res.data);
		});
	}, [isRequest]);

	//下面tabs
	const [radio_value, set_radio_value] = useState("1");
	const onChange = (e: any) => {
		set_radio_value(e.target.value);
		console.log(`radio checked:${e.target.value}`);
	};

	const reload = () => {
		setIsRequest(!isRequest);
	};
	return (
		<div className="base_bg_fff">
			<PicoInfo detail={detail} reload={reload}></PicoInfo>

			<section className="mt-50px flex items-center flex-col">
				<Radio.Group onChange={onChange} defaultValue="1">
					<Radio.Button value="1">场景内容</Radio.Button>
					<Radio.Button value="2">地图信息</Radio.Button>
					<Radio.Button value="3">详细信息</Radio.Button>
				</Radio.Group>
				<div className="p-20px border-1px border-solid border-#1677ff mt-50px w-100% box-border border-rd-10px">
					{radio_value == "1" && <SceneTable device_real_sn={device_real_sn}></SceneTable>}
					{radio_value == "2" && <MapTable device_real_sn={device_real_sn}></MapTable>}
					{radio_value == "3" && <PicoBaseInfo></PicoBaseInfo>}
				</div>
			</section>
		</div>
	);
}
